<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('登录')"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/ry-ui.css" th:href="@{/ocean/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
</head>
<body>
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-5">
            <form id="signupForm" autocomplete="off">
                <div class="el-dialog__title">登录</div>
                <input type="text" name="username" class="wbk uname" style="margin-top: 30px" placeholder="用户名" readonly onfocus="this.removeAttribute('readonly')" value="admin"/>
                <input type="password" name="password" class="wbk pword" style="margin-top: 20px" placeholder="密码" readonly onfocus="this.removeAttribute('readonly')" autocomplete="off"/>
                <div class="row m-t" th:if="${captchaEnabled==true}">
                    <div class="col-xs-6">
                        <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
                    </div>
                    <div class="col-xs-6">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                        </a>
                    </div>
                </div>
                <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
                    <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
                </div>
                <span class="dl btn btn-success btn-block" id="btnSubmit">登录</span>
            </form>
        </div>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ocean/js/ry-ui.js" th:src="@{/ocean/js/ry-ui.js?v=4.7.5}"></script>
<script src="../static/ocean/login.js" th:src="@{/ocean/login.js}"></script>
</body>
<th:block th:include="include :: footer"/>
<script>
    $("#btnSubmit").click(function () {
        $.modal.loading("登录中，请稍候...");
        loginhome()
    })
    function loginhome() {
        var username = $.common.trim($("input[name='username']").val());
        var password = $.common.trim($("input[name='password']").val());
        var validateCode = $("input[name='validateCode']").val();
        var rememberMe = $("input[name='rememberme']").is(':checked');
        $.ajax({
            type: "post",
            url: ctx + "login",
            data: {
                "username": username,
                "password": password,
                "validateCode": validateCode,
                "rememberMe": rememberMe
            },
            success: function(r) {
                $.modal.closeLoading();
                console.log("进入success1")
                if (r.code === web_status.SUCCESS) {
                    //console.log("进入success")
                    var index = parent.layer.getFrameIndex(window.name)
                    parent.layer.close(index)
                    window.parent.loadLogin(username)
                }else {
                    $.modal.msgError(r.msg)
                }
            },
            error: function (r) {
                //console.log('进入error')
            }
        });
    }

</script>
<style>
    .wbk{
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
    .dl{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #409eff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
    .el-dialog__title{
        line-height: 24px;
        font-size: 18px;
        color: #303133;
        text-align: center;
    }
</style>
</html>
